<template>
  <div>
    <!--新增界面-->
    <el-dialog title="方案详情" :visible.sync="dialogVisible" v-loading.fullscreen.lock="loading" element-loading-text="处理中......" size="large" :close-on-press-escape="false" :before-close="off" :top="dialog_margin_top">
      <el-form label-width="160px">
        <el-row :span="24">
          <el-col :span="8">
            <el-form-item label="方案类型" required>
              <el-select v-model="formData.plantype" filterable size="small" disabled>
                <el-option v-for="item in planTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="险种代码" required>
              <el-select v-model="formData.risk" filterable value-key="riskcode" size="small" disabled>
                <el-option v-for="item in riskOptions" :key="item.riskcode" :label="item.riskcode + '-' + item.riskcname" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否自动核保" required>
              <el-select v-model="formData.autoundwrt" filterable size="small" disabled>
                <el-option v-for="item in autoUndwrtOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方案有效性" required>
              <el-select v-model="formData.validstatus" size="small" disabled>
                <el-option v-for="item in validOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方案中文名称" required>
              <el-input v-model="formData.plancname" size="small" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="方案英文名称" required>
              <el-input v-model="formData.planename" size="small" :maxlength="255" disabled></el-input>
            </el-form-item>
            <el-form-item label="行程目的地">
              <el-input v-model="formData.traveldestination" size="small" :maxlength="500" disabled></el-input>
            </el-form-item>
            <el-form-item label="职业分类代码">
              <el-input v-model="formData.occupationcode" size="small" :maxlength="10" disabled></el-input>
            </el-form-item>
            <el-form-item label="条款是否允许删除" required>
              <el-select v-model="formData.delflag" :disabled="disabledGroup.delflag" size="small">
                <el-option v-for="item in delFlagOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预设保险期限方式">
              <el-select v-model="formData.periodtype" size="small" disabled>
                <el-option v-for="item in periodTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预设保险期限值">
              <el-input v-model="formData.period" size="small" :maxlength="5" disabled></el-input>
            </el-form-item>
            <el-form-item label="方案权限适用机构" required>
              <el-input type="textarea" v-model="comLabel" :title="comLabel" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="方案权限适用渠道">
              <el-input type="textarea" v-model="formData.applychannel" :title="formData.applychannel" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="自动单证审核通过" required>
              <el-select v-model="formData.autodoc" filterable size="small" disabled>
                <el-option v-for="item in autoDocOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- ############################# 费率因子 ############################## -->
      <div v-for="(obj,k) in formData.propsGroup">
        <label style="font-size: 15px;color: black;font-weight:bold;">
          因子组【{{k}}】
        </label>
        <hr>
        <el-table class="production_table" :data="obj" border style="width: 100%;" :highlight-current-row="true">
          <el-table-column prop="propscname" label="序号" min-width="12">
            <template scope="scope">
              {{scope.row.rowId}}
            </template>
          </el-table-column>
          <el-table-column prop="propscname" label="因子" min-width="20">
            <template scope="scope">
              <select :id="'propscname'+ k + scope.row.rowId" disabled></select>
            </template>
          </el-table-column>
          <el-table-column prop="propstype" label="类型" min-width="20">
            <template scope="scope">
              <select :id="'propstype'+ k + scope.row.rowId" disabled>
                <option value="0">固定值</option>
                <option value="1">区间值</option>
              </select>
            </template>
          </el-table-column>
          <el-table-column prop="propsvalue" label="值" min-width="120">
            <template scope="scope">
              <div :id="'single'+ k +scope.row.rowId">
                <input :id="'propsvalue'+ k + scope.row.rowId" size="90" disabled></input>
              </div>
              <div :id="'multi'+ k +scope.row.rowId" style="display:none">
                <input :id="'startvalue'+ k + scope.row.rowId" disabled></input> 至
                <input :id="'endvalue'+ k + scope.row.rowId" disabled></input>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-form label-width="150px">
          <el-row :span="24">
            <el-col :span="22">
              <label style="font-size: 15px;color: black;font-weight:bold;">* 条款代码：</label>
              <input :id="'kindcodesLabel' + k" :title="formData.kindcodesGroup[k]" v-model="formData.kindcodesGroup[k]" disabled></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <label style="font-size: 15px;color: black;font-weight:bold;">责任代码：</label>
              <input :id="'itemcodesLabel' + k" :title="formData.itemcodesGroup[k]" v-model="formData.itemcodesGroup[k]" disabled></input>
            </el-col>
          </el-row>
        </el-form>
        <hr>
        <br>
      </div>
      <!-- ############################# 费率因子-end ############################## -->
      <br><br>
      <div align="center" v-if="formData.kindsGroup.length !== 0">
        <label style="font-size: 18px;color: black;font-weight:bold;">
          保额保费配置
        </label><br>
        <i class="fa fa-angle-double-down fa-4" aria-hidden="true"></i>
      </div>
      <br><br>

      <div v-for="(obj,k) in formData.kinditemsGroup">
        <label style="font-size: 15px;color: red;font-weight:bold;">因子组【{{k}}】- 【保额保费配置】</label>
        <hr>
        <el-row type="flex" :span="24" justify="space-around">
          <el-col :span="24">
            <el-table :data="obj" border style="width: 100%;" :highlight-current-row="true">
              <el-table-column prop="kindcode" label="条款代码" width="110"></el-table-column>
              <el-table-column prop="kindcname" label="条款名称" show-overflow-tooltip width="180"></el-table-column>
              <el-table-column prop="itemcode" label="责任代码" width="120"></el-table-column>
              <el-table-column prop="itemcname" label="责任名称" show-overflow-tooltip min-width="180"></el-table-column>
              <el-table-column prop="ownerFlag" label="责任归属" show-overflow-tooltip min-width="180"></el-table-column>
              <el-table-column prop="quantity" label="投保份数" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="currency" label="条款币别" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="amount" label="保额" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="premium" label="保费" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="unitamount" label="单位保额" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="unitpremium" label="单位保费" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column prop="rate" label="最终费率(%)" show-overflow-tooltip min-width="120"></el-table-column>
              <el-table-column prop="discount" label="折扣率(%)" show-overflow-tooltip min-width="120"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <hr>
        <br>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="off">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import PlanAPI from "../../../../js/production/plan/planAPI"
import PropsAPI from "../../../../js/production/props/propsAPI"
export default {
  data() {
    return {
      dialogVisible: true,
      dialog_margin_top: '1%',
      formData: {
        plantype: '',
        risk: null,
        plancode: '',
        plancname: '',
        planename: '',
        validstatus: '1',
        delflag: '0',
        autoundwrt: '0',
        traveldestination: '',
        periodtype: '3',
        period: '',
        applycomcode: '',
        applychannel: '',
        occupationcode: '',
        autodoc : '',
        propsGroup: [],
        kindcodesGroup: [],
        kindsGroup: [],
        itemcodesGroup: [],
        itemsGroup: [],
        kinditemsGroup: [],
      },
      propsOptions: [],
      propsStr: '',
      propsIndex: [],
      comLabel: '',
      arrayComcodes: [],
      cacheKindItems: [],
      planTypeOptions: [
        { label: 'a-非定额', value: 'a' },
        { label: 'b-定额定险别', value: 'b' },
        { label: 'c-定险别定费率', value: 'c' },
        { label: 'd-定额定险别定费率定保费', value: 'd' },
      ],
      periodTypeOptions: [
        { label: '天', value: '3' },
      ],
      riskOptions: [],
      validOptions: [
        { label: '1-有效', value: '1' },
        { label: '0-无效', value: '0' }
      ],
      delFlagOptions: [
        { label: '1-是', value: '1' },
        { label: '0-否', value: '0' }
      ],
      autoUndwrtOptions: [
        { label: '1-是', value: '1' },
        { label: '0-否 ', value: '0' },
      ],
      autoDocOptions: [
        {label: '默认',  value: null},
        {label: 'Y-是',  value: 'Y'},
        {label: 'N-否 ',  value: 'N'},
      ],
      disabledGroup: {
        delflag: true,
      },
      currentKindItem: {},
      loading: false,
      currentPropsIndex: '',
    }
  },
  mounted() {
    PlanAPI.initRiskSelect(this);
    PropsAPI.initPropsSelect(this);
    for (let i = 0; i < this.propsOptions.length; i++) {
      this.propsStr += "<option value='" + this.propsOptions[i].propscode + "'>" + this.propsOptions[i].propscname + "</option>";
    }
    let temp = Object.assign({}, this.$parent.rowDetail);
    this.comLabel = temp.applycomcode;
    this.originalCom = temp.applycomcode;
    if (typeof (temp.applycomcode) !== 'undefined' && temp.applycomcode !== null && temp.applycomcode !== '') {
      this.arrayComcodes = temp.applycomcode.split(',');
    }
    temp.delflag = null;
    temp.risk = null;
    temp.propsGroup = [];
    temp.kindcodesGroup = [];
    temp.kindsGroup = [];
    temp.itemcodesGroup = [];
    temp.itemsGroup = [];
    temp.kinditemsGroup = [];
    this.formData = temp;
    this.formData.risk = {
      riskcode: this.formData.riskcode,
      riskversion: this.formData.riskversion,
    };
    PlanAPI.initKindItems2(this);
    if (this.formData.plantype === 'a') {
      this.disabledGroup.delflag = false;
    }
    let vm = this;
    setTimeout(function () {
      for (let i = 0; i < vm.formData.propsGroup.length; i++) {
        for (let j = 0; j < vm.formData.propsGroup[i].length; j++) {
          let id = j + 1;
          $("#propscname" + i + id).html(vm.propsStr);
          $("#propscname" + i + id).val(vm.formData.propsGroup[i][j].propscode);
          $("#propstype" + i + id).val(vm.formData.propsGroup[i][j].propstype);
          $("#propsvalue" + i + id).val(vm.formData.propsGroup[i][j].propsvalue);
          $("#startvalue" + i + id).val(vm.formData.propsGroup[i][j].startvalue);
          $("#endvalue" + i + id).val(vm.formData.propsGroup[i][j].endvalue);
          vm.propsTypeChange(i, vm.formData.propsGroup[i][j]);
        }
      }
    }, 100);
    setInterval(function () {
      if (vm.comLabel !== vm.originalCom) {
        vm.formData.applychannel = '';
        vm.originalCom = vm.comLabel;
      }
    }, 500);
  },
  watch: {
    comLabel(newVal, oldVal) {
      this.formData.applycomcode = newVal;
    }
  },
  methods: {
    off() {
      this.$parent.showDetail2Dialog = false;
    },
    setDefault() {
      switch (this.formData.plantype) {
        case 'a': {
          this.disabledGroup.delflag = false;
          break;
        }
        case 'b': {
          this.formData.delflag = '0';
          this.disabledGroup.delflag = true;
          break;
        }
        case 'c': {
          this.formData.delflag = '0';
          this.disabledGroup.delflag = true;
          break;
        }
        case 'd': {
          this.formData.delflag = '0';
          this.disabledGroup.delflag = true;
          break;
        }
      }
    },
    propsTypeChange(k, row) {
      if ($("#propstype" + k + row.rowId).val() === '1') {
        $("#single" + k + row.rowId).hide();
        $("#multi" + k + row.rowId).show();
      } else if ($("#propstype" + k + row.rowId).val() === '0') {
        $("#single" + k + row.rowId).show();
        $("#multi" + k + row.rowId).hide();
      }
    },
  }
}
</script>
